$(function (){
  // 功能一：渲染文章类别
  /* 
    【1】定义函数，在函数中发起Ajax请求
    【2】判断请求是否成功
    【3】如果成功，渲染到下拉框中(art-template)
  */
 function renderArtCateList(){
  $.ajax({
    url: '/my/article/cates',
    success: function(res){
      if(res.status !== 0) return layer.msg(res.message,{icon: 5})
      layer.msg(res.message,{icon: 6})

      const str = template('art_cate',res)
      $('[name="cate_id"]').html(str)
      // 尽管 form 会对表单进行自动渲染，单当元素插入时,
      // 需要通过核心方法  form.render(type,filter) 来进行渲染
      layui.form.render()
    }
  })
 }
 renderArtCateList()


  //功能二: 初始化文本编辑器
  initEditor();

  //初始化裁剪效果
  const $image = $("#image");

  $image.cropper({
    //裁剪区域的宽高比例
    aspectRatio: 1 / 1,
    preview: ".img-preview",
  });
  //功能四: 更换裁剪图片
  $("#btnChooseImage").on("click", function () {
    $("#coverFile").click();
  });
  /* 
  [1]监听文件选择框的change事件
  [2]判断是否选择了文件
  [3]如果选择了,获取到上传的文件信息
  [4]将文件转换成路径的形式
  [5]先销毁裁剪区域,然后设置img的src属性,最后初始化
  */
  $("#coverFile").on("change", function () {
    const fileInfo = this.files;
    if (fileInfo.length === 0) return layer.msg("请选择上传的图片");
    const file = fileInfo[0];
    const url = URL.createObjectURL(file);
    $image.cropper("destroy");
    $image.attr("src", url);
    $image.cropper({
      //裁剪区域的宽高比例
      aspectRatio: 1 / 1,
      preview: ".img-preview",
    });
  });

  //处理文章状态
  let state = "已发布";
  $("#btnSave2").on("click", function () {
    state = "草稿";
  });
 //功能五: 发布文章
  /* 
   1)给表单注册submit提交事件
   2)阻止表单默认同步提交行为
   3)收集表单数据
   4)对表单数据做非空校验
   5)如果校验通过，发起ajax请求
   6)判断请求成功与否
   7)如果成功,跳转到文章列表页
  */ 
   $("#form-pub").on("submit", function (e) {
    e.preventDefault();
    const fd = new FormData(this);
    fd.append("state", state);
    //获取裁剪之后的二进制文章封面
    $image
      .cropper("getCroppedCanvas", {
        width: 400,
        height: 280,
      })
      .toBlob((blob) => {
        //添加文章封面
        fd.append("cover_img", blob);
        $.ajax({
          method: "post",
          url: "/my/article/add",
          data: fd,
          contentType: false,
          processData: false,
          success: function (res) {
            if (res.status !== 0) return layer.msg(res.message, { icon: 5 });
            layer.msg(res.message, { icon: 6 });
            //解决高亮显示
            window.parent
              .$(".layui-nav-itemed dl>dd")
              .removeClass("layui-this")
              .eq(1)
              .addClass("layui-this");
            location.href = "/article/art_list.html";
          },
        });
      });
  });
});